{% extends "layout/content.twig" %}

{% block main %}
    <style>
        .img-container {
            width: 100px;
            height: 100px;
            position: relative;
            display: inline-block;
        }

        .img-container .border {
            width: 90px;
            height: 90px;
            display: flex;
            justify-content: center;
            border: #CCCCCC solid 1px;
        }

        .img-container img {
            width: 98%;
            height: 98%;
            margin: auto;
            object-fit: contain;
        }

        .img-container .choose {
            position: absolute;
            bottom: 4px;
            right: 1px;
            width: 25px;
            height: 25px;
            display: none;
        }
    </style>
    <div class="layui-card">
        <div class="layui-card-body">
            <div class="layui-fluid p10">

                <blockquote class="layui-elem-quote layui-quote-nm">
                    {{ __('attachment.choose_limit') }}：
                    <span class="layui-font-red">{{ limit }}</span>
                </blockquote>

                <div class="layui-card">
                    <div class="layui-card-header">
                        {{ __('attachment.list') }}
                    </div>
                    <div class="layui-card-body">
                        <div id="attachment-items">

                        </div>
                    </div>
                </div>

                <div class="layui-card">
                    <div class="layui-card-header">
                        {{ __('attachment.choose_list') }}
                    </div>
                    <div class="layui-card-body" style="min-height: 100px;">
                        <div id="attachment-choose-items">

                        </div>
                    </div>
                </div>

                <div class="layui-row layui-col-space10">
                    <div id="attachment-page"></div>
                </div>
            </div>
        </div>
    </div>
    <script id="attachment-item-template" type="text/html">
        <div class="img-container">
            <div class="border">
                <img id="atid<%  d.id %>" data-id="<% d.id %>" src="<% d.thumb %>"
                     data-origin="<% d.filepath %>">
            </div>
            <div class="choose">
                <i class="iconfont icon-right layui-bg-red"></i>
            </div>
        </div>
    </script>
    <script id="attachment-choose-template" type="text/html">
        <div class="img-container">
            <div class="border">
                <img id="coid<% d.id %>" data-id="<% d.id %>" src="<% d.thumb %>"
                     data-origin="<% d.filepath %>">
            </div>
            <div class="choose remove-img" style="display: block">
                <i class="iconfont icon-close layui-bg-red"></i>
            </div>
        </div>
    </script>
{% endblock %}

{% block script %}
    <script type="text/javascript">
        layui.use(['http', 'storage'], function () {

            let laypage = layui.laypage;
            let http = layui.http;
            let storage = layui.storage;
            let laytpl = layui.laytpl;

            laytpl.config({
                open: '<%',
                close: '%>'
            });

            let limit = '{{ limit }}';
            let ext = '{{ ext }}';
            let page_size = 30;

            let choose_tpl = document.getElementById('attachment-choose-template').innerHTML;
            let item_tpl = document.getElementById('attachment-item-template').innerHTML;

            const loadAttachment = (page_id) => {

                http.get('{{ auth_route('home/choose') }}',
                    {
                        json: 1,
                        limit: limit,
                        ext: ext,
                        page_id: page_id,
                        page_size: page_size,
                    }).then(res => {
                    try {
                        let data = res.data.data || [];
                        for (let i in data) {
                            laytpl(item_tpl).render(data[i], function (str) {
                                $('#attachment-items').append(str);
                            });
                        }
                    } catch (e) {

                    }
                });
            };

            loadAttachment(1);

            laypage.render({
                elem: 'attachment-page',
                count: {{ total }},
                theme: '#1E9FFF',
                limit: page_size,
                prev: lang.page.prev || '上一页',
                next: lang.page.next || '下一页',
                jump: function (obj, first) {
                    if (!first) {
                        loadAttachment(obj.curr);
                    }
                },
            });

            $('#attachment-items').on('click', '.img-container', function () {
                let filepath = $(this).find('img').data('origin');
                let id = $(this).find('img').data('id');
                let src = $(this).find('img').attr('src');
                let choose = $(this).find('.choose');
                if (choose.css('display') === 'block') {
                    choose.hide();
                    // 从列表中删除
                    $('#attachment-choose-items').find('#coid' + id).parents('.img-container').remove();
                    // 从本地记录删除
                    storage.removeUnique('attachment_choose_items', filepath);
                } else {
                    choose.show();
                    // 加入到已选列表
                    if ($('#attachment-choose-items').find('#coid' + id).length === 0) {
                        laytpl(choose_tpl).render(
                            {
                                id: id,
                                thumb: src,
                                filepath: filepath,
                            }, function (str) {
                                $('#attachment-choose-items').append(str);
                                storage.pushUnique('attachment_choose_items', filepath);
                            });
                    }
                }
            });

            $('#attachment-choose-items').on('click', '.remove-img', function () {
                let img = $(this).parents('.img-container').find('img');
                let filepath = img.data('origin');
                let id = img.data('id');
                $('#atid' + id).parents('.img-container').find('.choose').hide();
                storage.removeUnique('attachment_choose_items', filepath);
                $(this).parents('.img-container').remove();
            });
        });
    </script>
{% endblock %}